class SearchManager {
  constructor() {
    this.searchOverlay = null;
    this.searchInput = null;
    this.filterCallback = null;
    this.resetCallback = null;
    this.init();
  }

  init() {
    this.setupKeyboardListener();
  }

  setupKeyboardListener() {
    console.log('监听键盘事件');
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        this.hideSearch();
      }
      if (e.target.tagName === 'INPUT') return;
      if (/^[a-zA-Z0-9]$/.test(e.key)) {
        this.showSearch();
      }
    });
  }

  createSearchOverlay() {
    if (this.searchOverlay) {
      return this.searchOverlay;
    }
  
    this.searchOverlay = document.createElement('div');
    this.searchOverlay.className = 'search-overlay';
  
    const searchContainer = document.createElement('div');
    searchContainer.className = 'search-container';
  
    this.searchInput = document.createElement('input');
    this.searchInput.type = 'text';
    this.searchInput.className = 'search-input';
    this.searchInput.placeholder = '输入关键字搜索...';
  
    const searchTips = document.createElement('div');
    searchTips.className = 'search-tips';
    searchTips.textContent = '按下 ESC 可还原';
  
    searchContainer.appendChild(this.searchInput);
    searchContainer.appendChild(searchTips);
    this.searchOverlay.appendChild(searchContainer);
    document.body.appendChild(this.searchOverlay);
  
    this.setupEventListeners();
  
    return this.searchOverlay;
  }

  setupEventListeners() {
    // this.searchOverlay.addEventListener('click', (e) => {
    //   if (e.target === this.searchOverlay) {
    //     this.hideSearch();
    //   }
    // });

    this.searchInput.addEventListener('input', (e) => {
      if (this.filterCallback) {
        this.filterCallback(e.target.value);
      }
    });
  }

  showSearch(initialChar = '') {
    const overlay = this.createSearchOverlay();
    overlay.style.display = 'flex';
    this.searchInput.value = initialChar;
    this.searchInput.focus();

    if (this.filterCallback) {
      this.filterCallback(initialChar);
    }
  }

  hideSearch() {
    console.log('隐藏', this.searchOverlay);
    if (this.searchOverlay) {
      this.searchOverlay.style.display = 'none';
      if (this.resetCallback) {
        this.resetCallback();
      }
    }
  }

  onFilter(callback) {
    this.filterCallback = callback;
  }

  onReset(callback) {
    this.resetCallback = callback;
  }
}

// 创建全局实例
const searchManager = new SearchManager();

// 在 main.js 中设置过滤和重置回调
searchManager.onFilter((keyword) => {
  const container = document.getElementById('gridContainer');
  const items = container.getElementsByTagName('a');
  
  keyword = keyword.toLowerCase();
  
  Array.from(items).forEach(item => {
    const name = item.querySelector('.name').textContent.toLowerCase();
    if (name.includes(keyword)) {
      item.style.display = '';
    } else {
      item.style.display = 'none';
    }
  });
});

searchManager.onReset(() => {
  const container = document.getElementById('gridContainer');
  const items = container.getElementsByTagName('a');
  Array.from(items).forEach(item => {
    item.style.display = '';
  });
});

window.searchManager = searchManager;
